<template>
  <el-dialog
    v-el-drag-dialog
    class="cylinderFlowControl-detailDialog"
    :title="type | titleText"
    :visible.sync="isShow"
    width="850px"
    @closed="close"
  >
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="column"
      :data="tableData"
    />
  </el-dialog>
</template>

<script>
  import { queryReceiveBottleDetail, queryMap } from '@/api'
  import { formatColumnMap } from '@/utils'

  export default {
    filters: {
      titleText(val) {
        switch (val) {
        case 1:
          return '领瓶明细'
        case 2:
          return '还瓶明细'
        }
      }
    },
    data() {
      return {
        isShow: false,
        tableData: [],
        rowData: {},
        type: 1,
        gdStatusMap: []
      }
    },
    computed: {
      column() {
        return [
          { label: '商品', prop: 'goodsName', width: 150 },
          {
            label: '状态',
            prop: 'gdStatus',
            render: (h, { row }) => (
            <span>
              {row.gdStatus &&
                formatColumnMap(this.gdStatusMap, 'value', row.gdStatus, 'desc')}
            </span>
          )
          },
          { label: '数量', prop: 'gdCount', align: 'right' },
          {
            label: '气瓶编码',
            prop: 'bottleCode',
            width: 250,
            showOverflowTooltip: true,
            render: (h, { row }) => <span>{row.bottleCode}</span>
          },
          {
            label: '芯片编码',
            width: 250,
            showOverflowTooltip: true,
            prop: 'chipCode',
            render: (h, { row }) => <div>{row.chipCode}</div>
          }
        ]
      }
    },
    methods: {
      close() {},
      show(type, row) {
        this.type = type
        this.rowData = row
        this.isShow = true
        this.getTableData()
      },
      // 获取状态的枚举数据
      async queryOptionsMap() {
        const { status, data } = await queryMap({ enumName: 'GdStatus' })
        if (status === 200) this.gdStatusMap = data
      },
      async getTableData() {
        const params = {
          invenBillCode: this.rowData.invenBillCode
        }
        const { status, data } = await queryReceiveBottleDetail(params)
        if (status === 200) {
          this.tableData = data
          if (!this.gdStatusMap.length) this.queryOptionsMap()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
